<template>
  <div class="salary-management">
    <el-row>
      <el-col :span="18">
        <el-input v-model="searchText" placeholder="请输入搜索关键字" class="salary-search" />
      </el-col>
      <el-col :span="6" class="salary-add-btn">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加工资</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="salaryList"
      style="width: 100%"
      class="salary-table"
      :row-class-name="getRowClass"
    >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="position" label="职位" />
      <el-table-column prop="department" label="部门" />
      <el-table-column prop="baseSalary" label="基本工资" />
      <el-table-column prop="bonus" label="奖金" />
      <el-table-column prop="totalSalary" label="总工资" />
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="salaryDialogVisible" title="添加/编辑工资">
      <el-form ref="salaryForm" :model="salaryForm" :rules="salaryRules" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="salaryForm.name" />
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="salaryForm.position" />
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="salaryForm.department" />
        </el-form-item>
        <el-form-item label="基本工资" prop="baseSalary">
          <el-input-number v-model="salaryForm.baseSalary" :min="0" :step="100" />
        </el-form-item>
        <el-form-item label="奖金" prop="bonus">
          <el-input-number v-model="salaryForm.bonus" :min="0" :step="100" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchText: '',
      salaryList: [
        {
          name: '张三',
          position: '经理',
          department: '销售部',
          baseSalary: 5000,
          bonus: 2000,
          totalSalary: 7000
        },
        {
          name: '李四',
          position: '职员',
          department: '财务部',
          baseSalary: 3000,
          bonus: 1000,
          totalSalary: 4000
        }
      ],
      salaryDialogVisible: false,
      salaryForm: {
        name: '',
        position: '',
        department: '',
        baseSalary: 0,
        bonus: 0,
        totalSalary: 0
      },
      salaryRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
        department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
        baseSalary: [{ required: true, message: '请输入基本工资', trigger: 'blur' }],
        bonus: [{ required: true, message: '请输入奖金', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getRowClass(row) {
      if (row.totalSalary > 5000) {
        return 'salary-high'
      } else {
        return ''
      }
    },
    handleAdd() {
      this.salaryForm = {
        name: '',
        position: '',
        department: '',
        baseSalary: 0,
        bonus: 0,
        totalSalary: 0
      }
      this.salaryDialogVisible = true
    },
    handleEdit(index) {
      this.salaryForm = Object.assign({}, this.salaryList[index])
      this.salaryDialogVisible = true
    },
    handleDelete(index) {
      this.salaryList.splice(index, 1)
    },
    handleSubmit() {
      this.$refs.salaryForm.validate(valid => {
        if (valid) {
          this.salaryForm.totalSalary = this.salaryForm.baseSalary + this.salaryForm.bonus
          if (this.salaryList.indexOf(this.salaryForm) === -1) {
            this.salaryList.push(this.salaryForm)
          }
          this.salaryDialogVisible = false
        }
      })
    },
    handleCancel() {
      this.salaryDialogVisible = false
    }
  }
}
</script>
<style scoped>
.salary-management {
  padding: 20px;
}
.salary-search {
  width: 80%;
}
.salary-add-btn {
  text-align: right;
}
.salary-table {
  margin-top: 20px;
}
.salary-high {
}
